<template>
    <CounterControl @update-count="update" @add-record="add"></CounterControl>
    <div>{{ count }}</div>
    <div v-for="val in record">
        {{ val }}
    </div>
</template>

<script setup>
import CounterControl from './CounterControl.vue';
import { onUpdated, reactive, ref } from 'vue';
let count=ref(0);
let record=reactive([]);
function update(num){
 count.value+=num;
}
function add(rec){
    record.push(rec)
}
onUpdated(()=>{
    console.log("1")
})
</script>
<style scoped>
    
</style>
练习题 2：计数器与操作记录（子传父 + 状态管理）
需求：
- 父组件 CounterManager 中显示一个计数器数值和操作记录列表。
- 子组件 CounterControl 包含两个按钮：“+1” 和 “-1”，用于修改计数器数值。
- 每次点击子组件的按钮时，不仅要更新父组件的计数器数值，还要向父组件传递一条操作记录（如 “点击了 + 1，当前值：5”），并在父组件中展示所有记录。
要求：
1.子组件通过 $emit 触发事件（如 update-count 和 add-record），向父组件传递数据。
2.父组件接收事件后，更新自身的 count 状态和 records 数组。
3.操作记录需包含时间戳（格式：YYYY-MM-DD HH:MM:SS），并按时间倒序排列。
提示：
- 时间格式化可使用 new Date().toLocaleString() 简化处理。